<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-details-content {
  position: fixed;
  top: rem(86px);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0 rem(50px) 0 rem(40px);
  .content {
    padding-top: rem(10px);
    padding-bottom: rem(150px);
  }
}
</style>

<template>
  <div class="book-details-content" ref="wrapper">
    <div class="content">
      <BContentInfo/>
      <BContentIntro/>
      <BContentNavbar/>
      <BContentChapter/>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import BContentInfo from './BookDetailsContentInfo'
import BContentIntro from './BookDetailsContentIntro'
import BContentNavbar from './BookDetailsContentNavbar'
import BContentChapter from './BookDetailsContentChapter'
export default {
  name: 'bookDetailsContent',
  components: {
    BContentInfo,
    BContentIntro,
    BContentNavbar,
    BContentChapter
  },
  data () {
    return {
      BScroll: {},
      detailsContent: {}
    }
  },
  mounted () {
    this.$nextTick(
      this.initBScroll()
    )
  },
  methods: {
    initBScroll () {
      let wrapper = this.$refs.wrapper
      this.BScroll = new BScroll(wrapper, {
        click: true
      })
    }
  }
}
</script>
